<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>老侯代读</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/audio.css">
    <link rel="stylesheet" href="/css/iconfont.css">
    <script src="/js/main.js"></script>

    <script src="/js/public.js"></script>
    <script src="/js/audioplayer.js"></script>
    <script src="/js/bookdetail.js"></script>
    <script src="/js/js.js"></script>
    <script>
        $( function()
        {
            $( 'audio' ).audioPlayer();


            $("#audiocollect").on("click", function(){
                //有问题
                $(this).find("a").toggleClass("act");
                var id = $.trim($('#hiID').val());
                if (id != '') {
                    ajaxjsonBookCollect(id);
                    $(this).toggleClass("act");
                } else {
                    autoDialog('<i class="icon icon-guanbi"></i><br>收藏失败。请稍后再试！');
                }
            });

            $(".media-play").on("click", function(){
                $(this).toggleClass("act")
            })
            
            var audio =  document.getElementById("mediaAudio");
           audio.addEventListener("pause", function(){
                $("#audioImg").css("animationPlayState", "paused");
                if($(".audioplayer-playpause").hasClass("act")){
                    $(".audioplayer-playpause").removeClass("act")
                }
            })
           audio.addEventListener("play", function(){
                $("#audioImg").css("animationPlayState", "running")
            })
        });
    </script>
</head>
<body>
<div class="container">
    <input type="hidden" id="hiID" value="{{$entBookInfo->BookID}}" name="hiID">
    <div class="audio-box">
        <!-- <div class="audio-banner">
            <img src="/images/audio.jpg" alt="">
            <img src="/images/audio-img.png" id="audioImg" class="audio-img" alt="">
        </div> -->
        <div class="audio-banner"  >
            <img class="audio-banner-img blur" style="width: 100%;" src="{{$entBookInfo->FilePath1}}" alt="">
            <img src="/images/audio-bg.png" style="position: absolute; width: 90%; left: 50%; margin-left: -45%; bottom: 1rem; z-index: 3;" alt="">
            <div class="audio-img-box audio-img" id="audioImg" style="background-image: url({{$entBookInfo->FilePath1}});">
            </div>
<!--            <img src="images/audio.jpg" alt="">-->
            <!--<img src="images/audio-img.png" class="" alt="">-->
           <!-- <div id="progressBarBox" class="progress-bar bar-posi">
                <p id="progressCache" class="cache"></p>
                <p id="progressBar" class="progress">
                    <span id="progressBarTag" class="progress-ctr"></span>
                </p>
            </div>-->
        </div>
        <!-- <span style="display: none;" id="preLesson">http://www.taobao.com</span>
        <span style="display: none;" id="nextLesson">http://www.taobao.com</span> -->
        <audio id="mediaAudio" class="media" preload="auto" controls>
            <source src="{{$entBookInfo->FilePath3}}" />
        </audio>

    </div>
    @if(count($entBookImg)>0)
        <div class="part-title other-title">
            <h3><span>代读PPT</span></h3>
        </div>
        <div class="mwrap ppt-wrap">
            <div class="ppt-box">
                <ul class="ppt-lists">

                    @foreach($entBookImg as $dataImg)
                        <li><img src="{{$dataImg->FilePath1}}" alt=""></li>
                    @endforeach
                </ul>
            </div>
            <div class="ppt-box" id="ppt-position">
                <ul id="pptDetail" class="ppt-detail-lsits">

                    @foreach($entBookImg as $datadImg)
                        <li><img src="{{$datadImg->FilePath1}}" alt=""></li>
                    @endforeach

                </ul>
            </div>
        </div>
    @endif

    <div class="part-title other-title">
        <h3><span>《{{$entBookInfo->BookTitle}}》读书改进计划</span></h3>
    </div>

    <div class="read-after wrap">
        <div class="read-after-title">
            <span>读书</span>
        </div>
        <div class="sub-text">
            <textarea name="txtBookReview1" placeholder="通过这次代读对你最有启发的知识点是？" id="txtBookReview1" cols="30"
                      rows="5">@if(count($entBookSumUp)>0)<?php echo html_entity_decode($entBookSumUp->BookReview1); ?>@endif</textarea>
        </div>
        <p class="sub-text-numb">500字以内</p>
    </div>
    <div class="read-after wrap">
        <div class="read-after-title">
            <span>读事</span>
        </div>
        <div class="sub-text">
            <textarea name="txtBookReview2" id="txtBookReview2" placeholder="通过你个人的改变会改变你工作上的事情是？" cols="30"
                      rows="5">@if(count($entBookSumUp)>0)<?php echo html_entity_decode($entBookSumUp->BookReview2); ?>@endif</textarea>
        </div>
        <p class="sub-text-numb">500字以内</p>
    </div>
    <div class="read-after wrap">
        <div class="read-after-title">
            <span>读人</span>
        </div>
        <div class="sub-text">
            <textarea name="txtBookReview3" id="txtBookReview3" placeholder="你通过这个知识点对你个人将改变的是？" cols="30"
                      rows="5">@if(count($entBookSumUp)>0)<?php echo html_entity_decode($entBookSumUp->BookReview3); ?>@endif</textarea>
        </div>
        <p class="sub-text-numb">500字以内</p>
    </div>
    <div class="read-after wrap">
        <div class="read-after-title">
            <span>赠礼物</span>
        </div>
        <div class="sub-text">
            <textarea name="txtBookReview4" id="txtBookReview4" placeholder="你给公司建设性建议是？" cols="30"
                      rows="5">@if(count($entBookSumUp)>0)<?php echo html_entity_decode($entBookSumUp->BookReview4); ?>@endif</textarea>
        </div>
        <p class="sub-text-numb">500字以内</p>
    </div>
    <div class="save-read-after">
        <input id="btnBookReview" name="btnBookReview" type="button" class="mbtn mbtn-sure" value="保存">
    </div>
    <!--底部-->
    @include('controller.footer')
</div>
<span id="letterTips" class="letter-tips">关注成功</span>
<script>
    $(function(){
       getTouch();
    })
</script>
</body>
</html>
</html>